<template>
  <div class="roleControl">
    <!--    表头-->
    <div class="headerTop">
      <el-form :inline="true">
        <div class="headerTopAll">
          <el-form-item label="角色代码：">
            <el-input v-model="searchRolecode" size="small" placeholder="请输入内容" />
          </el-form-item>
          <el-form-item label="角色名称：" class="headerTop-input">
            <el-input v-model="searchRoleName" size="small" placeholder="请输入内容" />
          </el-form-item>
          <el-form-item label="用户状态：" class="headerTop-input">
            <el-select size="small" v-model="value" disabled placeholder="暂不支持使用">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item class="headerTop-input">
            <el-button size="small" class="headerTop-input-check" @click="fnRoleSearch">查找
            </el-button>
            <el-button size="small" class="headerTop-input-reset" @click="Reset">重置</el-button>
          </el-form-item>
        </div>
      </el-form>
      <!-- 表头结束-->
    </div>
    <!--    网页主体-->
    <div class="subject">
      <div class="subject-button">
        <el-button @click="dialogVisible=true"
                   class="subject-button-body"
                   size="mini"
                   color="#1C84C6"
                   style="margin-right: 10px">新增
        </el-button>
        <!--        新增弹出框开始-->
        <el-dialog v-model="dialogVisible" title="新增角色" @close="closeDialog">
          <el-form>
            <el-form-item label="角色名称:">
              <el-input v-model="rName" size="small" />
            </el-form-item>
            <el-form-item label="角色代码:">
              <el-input v-model="code" size="small" />
            </el-form-item>
            <el-form-item label="角色说明:">
              <el-input v-model="remark" size="small" />
            </el-form-item>
            <el-form-item label="权限关联:">
              <el-select v-model="addPrSelectValue" multiple placeholder="请选择">
                <el-option
                  v-for="item in inputJurisdiction"
                  :key="item.pName"
                  :label="item.pName"
                  :value="item.pName"
                />
              </el-select>
            </el-form-item>
          </el-form>

          <template #footer>
            <span class="dialog-footer">
              <el-button @click="dialogVisible = false">取消</el-button>
              <el-button type="primary" @click="fnRoleInsert">确认</el-button>
            </span>
          </template>
        </el-dialog>
        <!--        新增弹出框结束-->

        <!--        修改弹出框开始-->

        <el-button class="subject-button-body"
                   @click="gainRid"
                   size="mini"
                   color="#48C2A9"
                   :disabled="btUpdate">修改
        </el-button>
        <el-dialog v-model="updateDialogVisible" title="修改角色" @close="closeDialog">
          <el-form-item label="角色名称:">
            <el-input v-model="rName" size="small" />
          </el-form-item>
          <el-form-item label="角色说明:">
            <el-input size="small" v-model="remark" />
          </el-form-item>
          <el-form-item label="角色代码:">
            <el-input size="small" v-model="code" />
          </el-form-item>
          <el-form-item label="权限关联:">
            <el-select v-model="permissionList" value-key="pId" multiple placeholder="请选择">
              <el-option
                v-for="item in updateJurisdiction"
                :key="item.pId"
                :label="item.pName"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <template #footer>
            <el-button @click="updateDialogVisible =false ">取消</el-button>
            <el-button type="primary" @click="fnRoleUpdate">确认</el-button>
          </template>
        </el-dialog>
        <!--        修改弹出框结束-->
        <!--        删除弹出框开始-->
        <el-button
          class="subject-button-body"
          size="mini"
          color="#ED5565"
          :disabled="btDelete" @click="deleteDialogVisible = true">删除
          <el-dialog v-model="deleteDialogVisible">
            <span>您确定要删除选中的角色吗？</span>
            <template #footer>
              <el-button @click="deleteDialogVisible = false">取消</el-button>
              <el-button @click="fnRoleDelete" type="primary">确认</el-button>
            </template>
          </el-dialog>
        </el-button>
      </div>
      <!--删除弹出框结束-->
      <!--      表格主体开始-->
      <div class="body-table">
        <el-table
          ref="multipleTable"
          :data="tableData"
          @selection-change="handleSelectionChange"
          size="mini">

          <el-table-column type="selection" width="55" />
          <el-table-column prop="rId" label="id" />
          <el-table-column prop="code" label="角色代码" />
          <el-table-column prop="rName" label="角色名称" />
          <el-table-column prop="remark" label="角色说明" />
          <el-table-column prop="status" label="角色状态">
            <template #default="scope">
              {{ ACCOUNT_STATUS[scope.row.status] ? ACCOUNT_STATUS[scope.row.status] : '--' }}
            </template>
          </el-table-column>

          <el-table-column prop="permissionList" label="角色权限" width="300px">
            <template #default="scope">
              <template v-for="item in scope.row.permissionList" :key="item.pId">
                <el-tag size="mini">{{ item.pName }}</el-tag>
              </template>
            </template>
          </el-table-column>

          <el-table-column prop="createTime" label="角色创建时间" :formatter="formatTime" />
          <el-table-column prop="updateTime" label="最后更新时间" :formatter="formatTime" />

        </el-table>

      </div>

      <!--      表格主体结束-->
    </div>
  </div>
</template>
<style></style>
<script>
import './index.less'
import indexT from "./indexT";

export default indexT;
</script>
